// 前端自动生成图片并下载流程
// 1 创建画布
// 2 读取图片地址
//   1）new Image()
//   2)赋予src
//   3)赋予onload
//   4)赋予onerror
// 3 图片放入canvas
//   1）图片onload函数内放置操作
//   2）ctx.drawImage
// 4 生成下载
//   1)base64 canvas.toDataURL
//   2)创建a标签，放入各个下载参数
//   3）点击自己下载
// 5 重置画布，进入循环(画个矩形，清空画布)

// 由于canvas的安全限制，我们必须保证资源和网页在同一个域名下进行，否则画入是没问题的，但是导出就会报“画布被污染”的错误。所以我们一共有多个解决办法：
// 1 nodejs搭建一个本地服务器，所有资源都在同域下。特点：适合部署上线使用，但麻烦
// 2 本地解除chrome跨域限制（利用chrome启动参数）。特点：简单粗暴，本地快速解决问题，但只适合自己使用
// 3 img标签增加img.setAttribute('crossOrigin', 'anonymous')。特点：能解决目前的问题，但是有隐患
// 4 使用new FileReader();将请求到的blob数据读取成base64地址。特点：代码增加，其他没发现缺点
// 5 使用URL.createObjectURL(res) 将请求到的blob数据读取成Blob类型的地址。特点：代码增加，同时要记得URL.revokeObjectURL取消掉关联，其他没发现缺点。

let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
fetch('https://img.alicdn.com/bao/uploaded/i1/446338500/O1CN01npzdZ52Cf3A4cx8JG_!!0-item_pic.jpg_240x240.jpg')
  .then(res => res.blob())
  .then(res => {
    let fr = new FileReader()
    fr.onload = function (e) {
      console.log(e)
      console.log(e.target.result)
      let img = new Image()
      // 第一种方法
      // img.setAttribute('crossOrigin', 'anonymous')
      // img.src = 'https://img.alicdn.com/bao/uploaded/i1/446338500/O1CN01npzdZ52Cf3A4cx8JG_!!0-item_pic.jpg_240x240.jpg'
      // 第二种方法
      // img.src = e.target.result // 转成base64
      // 第三种方法
      // img.src = URL.createObjectURL(res) // 转成Blob地址ObjectUrl

      img.onload = function () {
        ctx.drawImage(img, 0, 0)
        console.log(canvas.toDataURL()) // 导出成dateurl
        canvas.toBlob(function (blob) { // 导出成blob地址
          let url = URL.createObjectURL(blob)
          console.log(url)
        })
      }
    }

    fr.onerror = function () {
      console.log('读取错误！')
    }
    fr.readAsDataURL(res)
  })

function test() { } // 防止格式化代码出问题

// 接下来我们可以开始实现下载，利用a标签的download即可。
// 同时要注意，a标签download属性不支持跨域，不过在我们这里面，不会涉及到跨域（canvas数据就是从这页面里产生的）。

// 如何批量导出？

// 在这里要注意，由于我们存在一些异步环节，我们要使用Async await来实现对它们的顺序执行。
// 这样的话，就会按照顺序执行，另外浏览器记得打开允许自动下载（本地环境可能会老有提示，但是如果拿一个localhost托管就不会有问题了）

(async () => {
  let result = []
  // 要处理的图片数组
  let arr = [
    // 'https://img.alicdn.com/bao/uploaded/i1/446338500/O1CN01npzdZ52Cf3A4cx8JG_!!0-item_pic.jpg_240x240.jpg',
    // 'https://img.alicdn.com/bao/uploaded/i1/446338500/O1CN01npzdZ52Cf3A4cx8JG_!!0-item_pic.jpg_240x240.jpg',
  ]

  for (let i = 0; i < arr.length; i++) {
    await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 10)
    })
    try {
      await createImg(arr[i]).catch(err => {
        result.push(arr[i])
        console.log(arr[i], '服务器端响应出错，无法获取图片')
      })
    } catch (e) {
      result.push(arr[i])
      console.log(arr[i], '程序处理时无法处理图片', '原因：', e)
    }
  }

  console.log(result)
  // document.body.innerText = result.join("")

})()


function createImg(article) {
  return new Promise((resolve, reject) => {
    let temp = new Image()
    temp.src = 'http://XXXXXX/getpic?type=touming&article=' + article;
    temp.onerror = function () {
      reject(article)
    }
    temp.onload = function () {
      ctx.drawImage(temp, 940, 90, 650, 650);
      let bloburl = canvas.toDataURL('image/jpeg');
      let a = document.createElement('a');
      a.href = bloburl;
      a.download = article;
      a.click()
      ctx.rect(0, 0, 2000, 800);
      ctx.fillStyle = "rgb(236,237,239)";
      ctx.fill();
      resolve()
    }
  })
}

// 踩坑：
// 这里要注意，我定义了Image对象的onerror事件，
// 因为async await等待的Promise不知道捕获到服务器错误的（如果服务器宕机了一下，脚本会直接停止报错），
// 所以我们需要在onerror里面引入，然后reject掉，promise就可以拿到错误信息了，之后再catch就好了。
// 同时为了防止出现复杂的报错停止，加入了try catch保证错误能被拿到。
